<template>
  <a-modal
    v-model:visible="visible"
    :title="modalTitle"
    width="35%"
    @ok="handleSubmit"
    @cancel="close"
  >
    <a-form
      :model="formState"
      ref="formRef"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 18 }"
    >
      <a-form-item
        label="物流编号"
        name="ship_no"
        :rules="[{ required: true, message: '请输入物流编号' }]"
      >
        <a-input v-model:value="formState.ship_no" placeholder="请输入物流编号"
      /></a-form-item>
      <a-form-item
        label="物流公司"
        name="ship_id"
        :rules="[{ required: true, message: '请选择物流公司' }]"
      >
        <a-select v-model:value="formState.ship_id" placeholder="请选择">
          <a-select-option
            v-for="(item, i) in state.options"
            :key="i"
            :value="item.id"
            >{{ item.name }}</a-select-option
          >
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import { reactive, ref } from "vue";
import { getSystemShip, refundSend } from "@/api/refund";
import { message } from "ant-design-vue";
import useModal from "@/utils/useModal";

const emits = defineEmits(["update"]);
const { visible, modalTitle } = useModal();

const formState = reactive({
  ship_no: "",
  ship_id: null,
});
const formRef = ref();
const state = reactive({
  options: [],
});
const show = (model) => {
  visible.value = true;
  modalTitle.value = model.title;
  resetForm(model);
  getShipComList();
};
const resetForm = function (values) {
  for (var i in values) {
    formState[i] = values[i];
  }
};
// 获取物流公司
const getShipComList = () => {
  getSystemShip().then((res) => {
    if (res.code == 0) {
      const data = res.data;
      state.options = data;
    }
  });
};
// 保存
const handleSubmit = async () => {
  await formRef.value.validate();
  const params = {
    ...formState,
  };

  refundSend(params).then((res) => {
    if (res.code == 0) {
      message.success(res.msg);
      hide();
      emits("update");
    }
  });
};
const hide = () => {
  visible.value = false;
  formRef.value.resetFields();
};
const close = () => {
  formRef.value.resetFields();
};
// 暴露方法
defineExpose({ show });
</script>
